<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的盐汽水</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <header class="header" style="">
        <div class="header-left">
            <div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>
            </div>
        </div>
        <h2>积分明细</h2>
    </header>
</div>

<div class="mescroll" id="mescroll" style="padding-top: 1.42rem">
    <!--  -->
    <ul class="userType_list3  header-shadow">
        <li tapmode class="on" data-id="1">全部</li>
        <li tapmode data-id="2">收入</li>
        <li tapmode data-id="3">支出</li>
    </ul>
    <section class="html_section ">
          <ul class="money_list" id="money_list">
            <!--<li class="line_center between">
                <div>
                    <div class="f30">签到</div>
                    <div class="f24 mt10 c-999">2017-6-1 09:35</div>
                </div>
                <div class="c-primary line_center"><img class="icon-qs mr20" src="../../icon/icon-qs.png"/><span class="f30">+5ml</span></div>
            </li>
            <li class="line_center between">
                <div>
                    <div class="f30">签到</div>
                    <div class="f24 mt10 c-999">2017-6-1 09:35</div>
                </div>
                <div class="c-primary line_center"><img class="icon-qs mr20" src="../../icon/icon-qs.png"/><span class="f30">+5ml</span></div>
            </li>-->
        </ul>
       
    </section>
</div>


</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css"/>
<script type="text/javascript" src="../../script/mescroll.min.js"></script>
<script type="text/javascript">
    var type = 1;//1为全部，2为收入，3为支出
    var page = 1;
    apiready = function () {
        setFixStatusBar(); //设置状态栏
        pop.loading()
        keybackListener()

        get_integral_details()
    }

    function get_integral_details() {
        var param = {
            token: $api.getStorage('token'),
            type: type,//1为全部，2为收入，3为支出
            page: page,
        }
        getAjax(Interface.integral_details,param,function (res) {

            var data = res.data.list;
            if(isDefine(data)){

                var list = '';
                $.each(data,function (i, item) {

                    var num = '';
                    if(item.type == 1){
                        num = '<span class="f30">+'+item.integral+'ml</span>'
                    }else {
                        num = '<span class="f30">-'+item.integral+'ml</span>'
                    }

                    list +='<li class="line_center between">' +
                        '                <div>' +
                        '                    <div class="f30">'+item.title+'</div>' +
                        '                    <div class="f24 mt10 c-999">'+item.date_time+'</div>' +
                        '                </div>' +
                        '                <div class="c-primary line_center"><img class="icon-qs mr20" src="../../icon/icon-qs.png"/>'+num+'</div>' +
                        '            </li>'

                })
                if(page == 1){
                    $("#money_list").html(list)
                }else {
                    $("#money_list").append(list)
                }
                page++;
                pullUp = true;

            }else {
                if(page == 1){
                    $("#money_list").html(noData)
                }else {
                    $("#money_list").append('<li class="line_center flex_center"><p class="t-c c-999">没有更多了</p></li>')
                }
                pullUp = false;
            }
            pop.close()
            mescroll.endErr()
        },function (error) {
            pop.notice(error.msg)
            pop.close()
            mescroll.endErr()
        })
    }



    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        },
        up: {
            auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            /*toTop:{ //配置回到顶部按钮
                src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                //offset : 1000
            }*/
        }
    });
    /*下拉刷新的回调 */
    function downCallback() {
        page = 1;
        get_integral_details()
        //mescroll.endErr();
    }
    /*上拉加载的回调 */
    function upCallback() {
        if (pullUp == true) {
            get_integral_details()
        } else {
            mescroll.endErr();
        }
    }


    $(".userType_list3 li").click(function () {
        $(".userType_list3 li").removeClass("on");
        $(this).addClass("on");
        type = $(this).attr('data-id');
        page = 1;
        $("#money_list").html('')
        get_integral_details()
    })

</script>
